<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :labelCol="{ style: 'width:80px' }">
        <a-row :gutter="48">
          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="车间">
                 <j-dict-select-tag type="list" v-model="queryParam.workshopId" dictCode="data_workshop,workshop_name,workshop_id" placeholder="请选择车间" />
              </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="工区">
                 <j-dict-select-tag type="list" v-model="queryParam.areaId" dictCode="data_area,area_name,area_id" placeholder="请选择工区" />
              </a-form-item>
          </a-col> -->
          <a-col :md="6" :sm="24">
            <a-form-item label="采样间隔">
              <a-input v-model="queryParam.distanceValue">
                <template #addonAfter>
                  <a-select v-model="queryParam.distanceUnit" style="width: 60px">
                    <a-select-option value="天">天</a-select-option>
                    <a-select-option value="时">时</a-select-option>
                  </a-select>
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="采样属性">
              <j-dict-select-tag
                type="list"
                v-model="queryParam.property"
                dictCode="data_property where status = 1 and prop_type = '日报',prop_name,prop_no"
                placeholder="请选择属性名称"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="聚合方式">
              <a-select placeholder="请选择" default-value="平均值" v-model="queryParam.aggregation">
                <a-select-option value="平均值">平均值</a-select-option>
                <a-select-option value="方差">方差</a-select-option>
                <a-select-option value="均方根">均方根</a-select-option>
                <a-select-option value="偏度">偏度</a-select-option>
                <a-select-option value="峭度">峭度</a-select-option>
                <a-select-option value="波形因子">波形因子</a-select-option>
                <a-select-option value="峰值因子">峰值因子</a-select-option>
                <a-select-option value="脉冲因子">脉冲因子</a-select-option>
                <a-select-option value="裕度因子">裕度因子</a-select-option> 
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="滚动">
              <a-input v-model="queryParam.scrollValue">
                <a-select slot="addonBefore" default-value="向前" v-model="queryParam.scroll">
                  <a-select-option value="向前">向前</a-select-option>
                  <a-select-option value="向后">向后</a-select-option>
                </a-select>
                <a-select slot="addonAfter" defaultValue="天" v-model="queryParam.scrollUnit" style="width: 60px">
                  <a-select-option value="天">天</a-select-option>
                  <a-select-option value="时">时</a-select-option> 
                </a-select>
              </a-input>

              <!-- <a-select defaultValue="向前" style="width: 70px" v-model="queryParam.scroll">
                <a-select-option value="向前">向前</a-select-option>
                <a-select-option value="向后">向后</a-select-option>
              </a-select>
              <a-input-number v-model="queryParam.callNo" style="width: 60px" />
              <a-select defaultValue="天" style="width: 60px" v-model="queryParam.scrollUnit">
                <a-select-option value="天">天</a-select-option>
                <a-select-option value="时">时</a-select-option>
                <a-select-option value="分">分</a-select-option>
              </a-select> -->
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="11" :md="12" :sm="24">
            <a-form-item label="采样范围">
              <a-range-picker v-model="queryParam.startEndDate" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="槽号">
              <j-select-data-slot
                placeholder="请选择槽号"
                :multi="true"
                :buttons="false"
                v-model="queryParam.dataSoltIds"
              ></j-select-data-slot>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
            >
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-spin :spinning="loading">
      <a-tabs defaultActiveKey="1">
        <!-- 柱状图 -->
        <a-tab-pane tab="图表" key="1">
          <!-- <bar title="" :dataSource="barData" :height="height" /> -->
          <!-- <transfer-bar title="年度消耗流量一览表" :data="barData" x="日期" y="电压(V)" :height="height"/> -->
          <line-chart-multid :key="new Date().getTime()" :dataSource="lineData" :fields="fields" :height="height" />
        </a-tab-pane>
        <!-- 多列柱状图 -->
        <a-tab-pane tab="数据" key="2">
          <a-table ref="table" size="default" :columns="columns" :data-source="barData2" />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-card>
</template>

<script>
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import TransferBar from '@/components/chart/TransferBar'
import STable from '@/components/table/'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import moment from 'moment'
import axios from 'axios'
import { httpAction, getAction } from '@/api/manage'
import JSelectDataSlot from '@/components/jeecgbiz/JSelectDataSlot2'

export default {
  name: 'TableList',
  components: {
    JSelectDataSlot,
    Bar,
    LineChartMultid,
    TransferBar,
    AInput,
    ATextarea,
    STable,
  },
  data() {
    return {
      height: document.body.clientHeight - 357,
      barData: [],
      barData2: [],
      lineData: [],
      fields: ['电压'],
      dataList: [], 
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      }, 

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        distanceValue: '1', //采样间隔
        distanceUnit: '天',
        scroll: '向前',
        scrollValue: '1',
        scrollUnit: '天',
        property: 'electric', //采样属性
        startDate: '', //
        endDate: '', //
        startEndDate: [], //
        aggregation: '平均值', //聚合方式
        dataSoltIds: '',
      },
      // 表头
      columns: [
        {
          title: '时间',
          dataIndex: 'date',
          width: '200px',
        },
        {
          title: '槽号',
          dataIndex: 'soltId',
          needTotal: true,
          customRender: (text) => text,
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {},

      selectedRowKeys: [],
      selectedRows: [],
      loading: false,
    }
  },
  created() {
    //this.loadBarData();
    this.resetSearchForm()
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        that.height = document.body.clientHeight - 357
      })()
    }
  },
  methods: {
    handleSearch() {
      this.loadBarData()
    },
    loadData2(x, y, max, min, before = '', after = '') {
      let data = []
      for (let i = 0; i < 12; i += 1) {
        data.push({
          [x]: `${before}${i + 1}${after}`,
          [y]: Math.floor(Math.random() * max) + min,
        })
      }
      return data
    },
    // 加载柱状图数据
    loadBarData() {
      var that = this
      if(!that.queryParam.property){
        this.$message.warning('请选择采样属性')
        return
      } 
      if (that.queryParam.dataSoltIds.length == 0) {
        this.$message.warning('请选择槽号')
        return
      }
      if (that.queryParam.startEndDate) {
        that.queryParam.startDate = moment(that.queryParam.startEndDate[0]).format('YYYY-MM-DD')
        that.queryParam.endDate = moment(that.queryParam.startEndDate[1]).format('YYYY-MM-DD')
      }

      that.fields = []
      that.columns = [
        {
          title: '时间',
          dataIndex: 'date',
          width: '200px',
        },
      ]
      for (let i = 0; i < that.queryParam.dataSoltIds.length; i++) {
        var solt = that.queryParam.dataSoltIds[i].trim()
        that.fields.push(solt)
        that.columns.push({
          title: solt,
          dataIndex: solt,
          needTotal: true,
          customRender: (text) => text,
        })
      }
      //that.fields = that.queryParam.dataSoltIds // ["2001",'2002']//
      var param = Object.assign({}, that.queryParam)
      that.loading = true
      httpAction('/external/hadoop/roll/slots', param, 'post')
        .then((res) => {
          if (res.success) {
            if(res.result&&res.result.length==0){
               this.$message.warning("没有找到符合条件的数据")
              return;
            }
            var list = []
            that.barData2 = []
            that.lineData = []
            var data = res.result
            //data = that.sortBykey(data, that.queryParam.property)
            that.dataList = data
            that.barData2 = data
            that.dataList = data
            data.forEach((e) => {
              for (let i = 0; i < that.fields.length; i++) {
                var solt = that.fields[i].trim()
                e[solt] = parseFloat(e[solt].toFixed(2))
              }
              e.type = moment(e.date).format('YYYY-MM-DD HH:mm:ss')
            })
            that.lineData = data
            //      that.lineData =[ { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-01", "type": "2023-01-01" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-02", "type": "2023-01-02" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-03", "type": "2023-01-03" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-04", "type": "2023-01-04" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-05", "type": "2023-01-05" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-06", "type": "2023-01-06" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-07", "type": "2023-01-07" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-08", "type": "2023-01-08" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-09", "type": "2023-01-09" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-10", "type": "2023-01-10" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-11", "type": "2023-01-11" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-12", "type": "2023-01-12" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-13", "type": "2023-01-13" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-14", "type": "2023-01-14" }, { "2001": 3.99495792388916, "2002": 4.012852191925049, "tian": "2023-01-15", "type": "2023-01-15" } ];
            return
            that.dataList.forEach((e) => {
              var lineObj = that.lineData.find((o) => o.type == e.date)
              if (!lineObj) {
                var obj = { type: e.date }
                for (let i = 0; i < that.queryParam.dataSoltIds.length; i++) {
                  const soltId = that.queryParam.dataSoltIds[i]
                  obj[soltId] = that.getValue(soltId, e.date)
                }
                that.lineData.push(obj)
              }
            })
            return
            that.barData2 = []
            console.log('dataList:', JSON.stringify(data))
            for (const key in data) {
              for (let j = 0; j < data[key].length; j++) {
                const element = data[key][j]
                element.soltId = key
                element.value = element[that.queryParam.property]
                that.barData2.push(element)
              }
            }

            data[that.queryParam.dataSoltIds[0]].forEach((e) => {
              list.push({ x: e.date, y: e.electric })
              var obj = {
                tian: e.date,
                type: e.date,
              }
              for (let i = 0; i < that.queryParam.dataSoltIds.length; i++) {
                const key = that.queryParam.dataSoltIds[i]
                obj[key] = that.getValue(key, e.date)
              }
              that.lineData.push(obj)
            })
            this.barData = list
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.loading = false
        })

      // this.barData = this.loadData2('x', 'y', 1000, 200)
    },
    getValue(soltId, date) {
      var that = this
      var obj = that.dataList.find((item) => item.date == date && item.slot_id == soltId)
      if (obj) {
        return obj[that.queryParam.property].toFixed(2)
      }
      return 0
    },
    sortBykey(ary, key) {
      return ary.sort(function (a, b) {
        let x = a[key]
        let y = b[key]
        return x < y ? -1 : x > y ? 1 : 0
      })
    }, 
    resetSearchForm() {
      var that = this;
      this.queryParam = {
        property: '', //采样属性
        startDate: moment(new Date()).format('YYYY-MM') + '-01', //
        endDate: moment(new Date()).format('YYYY-MM-DD'), //
        distanceValue: '1',
        distanceUnit: '天',
        scroll: '向前',
        scrollValue: '1',
        scrollUnit: '天',
        aggregation: '平均值',
        dataSoltIds: [],
      }
      this.$set(that.queryParam, "startEndDate", [that.queryParam.startDate, that.queryParam.endDate])  
    },
  }
}
</script>